<template>
  <div id="centerTopKpi" :style="{width:layoutConfig.w + 'px'}">
    <div v-if="select === 2" class="flex_center justify-center ju">
      <div class="flex_center ju_item" @click="kpiClick('xingJuNum')" :class="[itemKey === 'xingJuNum' ? 'select':'']"
           style="margin-right: 24px">
        <div class="flex_center l">
          <img class="img" src="@/assets/img/tb/ju.png" alt="">
          <span>刑拘</span>
        </div>
        <div class="r">
          <span class="num">{{ apiData.xingJuNum }}</span>
          <span class="ren">人</span>
        </div>
      </div>
      <div class="flex_center ju_item" @click="kpiClick('zhiJuNum')" :class="[itemKey === 'zhiJuNum' ? 'select':'']">
        <div class="flex_center l">
          <img class="img" src="@/assets/img/tb/ju.png" alt="">
          <span>治拘</span>
        </div>
        <div class="r">
          <span class="num">{{ apiData.zhiJuNum }}</span>
          <span class="ren">人</span>
        </div>
      </div>
    </div>
    <div class="warp">
      <div :style="{flex:layoutConfig.lineFlex}" class="item mr-12 flex_center transition"
           :class="[itemKey === item.itemKey ? 'select':'']" @click="kpiClick(item.itemKey)"
           v-for="(item,index)  in domList" :key="index">
        <img class="img" :src="require(`@/assets/img/tb/${item.img}.png`)" alt=""/>
        <div class="ml-16">
          <div class="title" :style="{fontSize:layoutConfig.lineFlex < 4 ? '12px':'14px'}">{{ item.title }}</div>
          <div class="num">{{ item.value }} <span class="specifications">人</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { config, layoutConfig } from '@/utils/defaultKpiConfig'

export default {
  name: '',
  props: {
    select: {},
    other: {},
    apiData: {},
    itemKey: {}

  },
  watch: {
    select: {
      handler() {
      },
      immediate: true
    },
    apiData: {
      handler() {
        this.getData()
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() {
  },
  data() {
    return {
      layoutConfig: {},
      domList: [],
    }
  },
  methods: {
    getData() {
      this.layoutConfig = layoutConfig[this.select - 2] || {}
      const mapping = {
        'dq': 'daoQieJuLiuNum',
        'dc': 'daoCheNum',
        'dz': 'dianZhaNum',
        'sh': 'sheHuangNum',
        'sdu': 'sheDuNum',
        'sd': 'sheDuBoNum',
        'xingshi': 'xingShiNum',
        'zhian': 'zhiAnNum',
        'guyi': 'guYiSunCaiNum',
        '8lei': 'zhongDianNum',
        'liudong@2x': 'liuDongRenKouNum',
        'wfcz@2x': 'chuZuwuNum',
        'jtxc@2x': 'jiaoTongNum',
        'hlcl@2x': 'heLuCheNum',
        'zalx@2x': 'zhiAnNum',
        'hlry@2x': 'heLuRenNum',
        'jccs@2x': 'jianChaChangSuoNum',
        'paicha@2x': 'paiChaNum',
        'yhbz@2x': 'yanHuaNum',
        'daoju': 'shouJiaoNum',
        'fjdc@2x': 'feiXingRenNum',
        'ld2@2x': 'banAnNum',
        'ld1@2x': 'chuChangNum',
        'fa@2x': 'faAnNum',
        '110@2x': 'chuJingNum',
        'xydk@2x': 'xiaoYuanDakaNum',
        'jtsg@2x': 'jiaoTongNum',
        'jtwr@2x': 'jiaoTongWangRenNum',
      }
      // 遍历 '2k' 数组，对每个项进行更新
      const updatedArray = config[`${this.select}k`].map(item => {
        const apiKey = mapping[item.img]
        if (apiKey && Object.prototype.hasOwnProperty.call(this.apiData, apiKey)) {
          return {
            ...item,
            value: this.apiData[apiKey],
            itemKey: apiKey
          }
        }
        return item
      })

      this.domList = updatedArray || []
    },
    kpiClick(v) {
      this.$emit('kpiSelect', v)
    }
  }
}
</script>
<style scoped lang="scss">
$font-family: PingFang SC, PingFang SC, sans-serif;

#centerTopKpi {
  //width: 693px;
  //height: 286px;
  background-image: url("@/assets/img/kpi_bg.png");
  background-size: cover;
  background-position: center center;
  padding: 20px 12px 8px 24px;
  z-index: 5;

  .ju {
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;

    .ju_item {
      padding: 12px 16px;
      font-weight: 600;
      font-size: 16px;
      color: #C9D9E7;
      line-height: 16px;
      background-image: url("@/assets/img/kpi_top1_bg (2).png");
      background-size: cover;
      background-position: center center;
      cursor: pointer;

      &.select {
        background-image: url("@/assets/img/kpi_top1_bg (1).png");
        color: #fff;
      }

      .l {
        margin-right: 62px;
      }

      .r {
        .num {
          font-weight: 600;
          font-size: 16px;
          line-height: 16px;
        }

        .ren {
          font-weight: 400;
          font-size: 10px;
          line-height: 10px;
        }
      }
    }

    .img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
  }

  .warp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .item {
    padding: 14px 16px;
    margin-bottom: 12px;
    background-image: url(@/assets/img/chart_box_item_bg.png);
    cursor: pointer;

    &.select {
      background-image: url("@/assets/img/kpi_top1_bg (1).png");

      .num {
        color: #fff;
      }

      .specifications {
        color: #fff;

      }
    }

    .img {
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
    }

    .title {
      font-family: $font-family;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 14px;
      text-align: center;
      white-space: nowrap;
    }

    .num {
      font-family: $font-family;
      font-weight: 600;
      font-size: 22px;
      color: #17B9D6;
      line-height: 22px;
      margin-top: 8px;
    }

    .specifications {
      font-family: $font-family;
      font-weight: 400;
      font-size: 12px;
      color: rgba(162, 190, 208, 0.6);
      line-height: 12px;
      text-align: center;
    }
  }

}
</style>
